<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="false">
		<view slot="top">
			<z-nav-bar backState="1000">优惠券</z-nav-bar>
		</view>
		<view class="bg-white u-p-30">
			<u-swiper :list="bannerList" :current="current" bgColor="#FFFFFF" @click="handleNavBanner" circular></u-swiper>
		</view>
		
		<view class="u-p-30 u-m-b-30 bg-white" v-for="(coupon, index) in dataList" :key="index">
			<view class="u-flex">
				<view class="u-flex-3 u-text-center text-orange" :class="{'text-gray': !coupon.isAvailable, 'text-orange': coupon.isAvailable}">
					<template v-if="coupon.couponType == '1'">
						<!-- 代金券的场合 -->
						<view>
							<text class="text-bold u-font-52">{{coupon.deductionPrice | formatMoneyToYuanIntFilter}}</text>
							<text class="u-font-26 u-m-l-6 text-bold">元</text>
						</view>
					</template>
					<template v-else>
						<!-- 折扣券 -->
						<view>
							<text class="text-bold u-font-52">{{coupon.discountRate | formatMoneyToYuanIntFilter}}</text>
							<text class="u-font-26 u-m-l-6 text-bold">折</text>
						</view>
					</template>
				</view>
				<view class="u-flex-7 u-p-l-10 u-p-t-30" :class="{'text-gray': !coupon.isAvailable, 'text-black': coupon.isAvailable}">
					<view class="u-line-1">
						<text class="u-font-32 text-bold">{{coupon.couponName}}</text>
					</view>
					<view class="u-m-t-10">
						<!-- <view>
							<text>有效期至2023-12-31</text>
						</view> -->
						<template v-if="coupon.couponType == '1'">
							<text>满</text>
							<text>{{coupon.orderPrice | formatMoneyToYuanIntFilter}}</text>
							<text>元减</text>
							<text>{{coupon.deductionPrice | formatMoneyToYuanIntFilter}}</text>
							<text>元</text>
						</template>
						<template v-else>
							<text>满</text>
							<text>{{coupon.orderPrice | formatMoneyToYuanIntFilter}}</text>
							<text>元打</text>
							<text>{{coupon.discountRate | formatMoneyToYuanIntFilter}}</text>
							<text>折</text>
						</template>
						
						<template v-if="coupon.point">
							<text class="u-m-l-10 u-m-r-10">+</text>
							<text>{{coupon.point}}</text>
							<text>积分</text>
						</template>
					</view>
					<view class="u-m-t-10">
						<view v-if="coupon.expirationType == '2'">
							<!-- 固定时间段的场合 -->
							<template v-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.inProgress">
								<!-- 进行中的场合 -->
								<text>有效期至</text>
								<text>{{formatDate(coupon.effectiveEndDate)}}</text>
							</template>
							<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.notStarted">
								<!-- 未开始的场合 -->
								<text>{{formatDate(coupon.effectiveStartDate)}}</text>
								<text>至</text>
								<text>{{formatDate(coupon.effectiveEndDate)}}</text>
							</template>
							<template v-else>
								<!-- 优惠券被删除或者失效的场合 -->
								<text>{{formatDate(coupon.effectiveStartDate)}}</text>
								<text>至</text>
								<text>{{formatDate(coupon.effectiveEndDate)}}</text>
							</template>
						</view>
						<!-- 领券后生效的场合 -->
						<view v-else-if="coupon.expirationType == '1'">
							<text>领取后</text>
							<text>{{coupon.effectiveDays}}</text>
							<text>天内有效</text>
						</view>
					</view>
				</view>
				<view class="u-flex-2">
					<template v-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.inProgress">
						<u-button text="去使用" shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'120rpx', 'fontSize':'28rpx'}" @click="handleCouponUse"></u-button>
					</template>
					<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.notStarted">
						<u-button text="未开始" shape="circle" size="mini" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF', 'width':'120rpx', 'fontSize':'28rpx'}"></u-button>
					</template>
					<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.expried">
						<u-button text="已过期" shape="circle" size="mini" :customStyle="{'backgroundColor':'#C1C1C1', 'color': '#FFFFFF', 'width':'120rpx', 'fontSize':'28rpx'}"></u-button>
					</template>
					<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.invalid">
						<u-button text="已失效" shape="circle" size="mini" :customStyle="{'backgroundColor':'#C1C1C1', 'color': '#FFFFFF', 'width':'120rpx', 'fontSize':'28rpx'}"></u-button>
					</template>
					<template v-else-if="coupon.couponCurrentStatus == couponCurrentStatusEnum.used">
						<u-button text="已使用" shape="circle" size="mini" :customStyle="{'backgroundColor':'#C1C1C1', 'color': '#FFFFFF', 'width':'120rpx', 'fontSize':'28rpx'}"></u-button>
					</template>
				</view>
			</view>
			<view class="u-p-l-30 u-p-t-20">
				<view class="u-flex" style="opacity: 0.5;" @click="handleShowRemark(coupon)">
					<text class="u-m-r-10">使用规则</text>
					<u-icon name="arrow-up" size="14" v-if="coupon.isShowRemark"></u-icon>
					<u-icon name="arrow-down" size="14" v-else></u-icon>
				</view>
				<view class="u-m-t-20" v-show="coupon.isShowRemark">
					<text style="opacity: 0.5;">{{coupon.remark ? coupon.remark : '暂未设置规则'}}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum} from '@/common/const.js'
	import {getBanner} from '@/api/home.js'
	import {getMyCoupon} from '@/api/coupon.js'
	import dayjs from 'dayjs'
	import {couponCurrentStatusEnum} from '@/common/const.js'
	
	export default{
		data(){
			return{
				couponCurrentStatusEnum,
				dataList:[],
				activityList:[],
				bannerList: [],
				current:0
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			/**
			 * 初始化
			 */
			init(){
				// 获取轮播图
				getBanner().then(res=>{
					this.activityList = res.data					
					res.data.forEach(item=>{
						item.bannerImage = JSON.parse(item.bannerImage)
						if(item.bannerImage.length > 0){
							this.bannerList.push(item.bannerImage[0].materialUrl)
						}
					})
				})
				
				this.reload()
			},
			
			/**
			 * 重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询数据
			 */
			queryList(){
				this.dataList = []
				getMyCoupon().then(res=>{
					this.dataList = res.data
					this.dataList.forEach(item=>{
						this.$set(item,'isShowRemark', false)
						
						if(item.couponCurrentStatus == couponCurrentStatusEnum.inProgress ||
							item.couponCurrentStatus == couponCurrentStatusEnum.notStarted){
							// 活动进行中或者未开始的场合
							this.$set(item,'isAvailable', true)
						} else {
							// 已失效获取已过期
							this.$set(item,'isAvailable', false)
						}
					})
					this.dataList.sort((a,b)=>{return parseInt(a.couponCurrentStatus) - parseInt(b.couponCurrentStatus)}) 
					this.$refs.paging.complete(this.dataList);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false);
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 格式化优惠券时间
			 */
			formatDate(val){
				return dayjs(val).format('YYYY-MM-DD')
			},
			
			/**
			 * 点击活动跳转
			 */
			handleNavBanner(index){
				const item = this.activityList[index]
				if(item.navType == '1'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/goods/detail?spuId=${item.spuId}&skuId=${item.skuId}`, false)
				} else if(item.navType == '2'){
					this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/equity/detail?id=${item.spuId}`, false)
				}
			},
			
			/**
			 * 显示备注
			 */
			handleShowRemark(coupon){
				coupon.isShowRemark = !coupon.isShowRemark
			},
			
			/**
			 * 去使用优惠券
			 */
			handleCouponUse(){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/goods/list`, true)
			}
		}
	}
</script>

<style>
</style>